import { type FC } from 'react';

import { equipmentProductListApi } from '@/api/equipmentProductApi';
import { getEnumLabel, ProductNodeType } from '@/constants';

/**
 * 远程数据获取参数接口
 */
interface FetchParams {
  page: number;
  pageSize: number;
  [key: string]: any;
}

/**
 * 设备表单组件属性
 */
interface DeviceFormProps {
  /** 表单实例 */
  form: FormInstance;
  /** 地图选择回调 */
  onMapSelect: () => void;
}

/**
 * 设备表单组件
 * 包含设备的基本信息字段
 */
const DeviceForm: FC<DeviceFormProps> = ({ form, onMapSelect: _onMapSelect }) => {
  /**
   * 获取产品列表数据
   * 用于产品选择器的远程数据源
   * @param params 查询参数
   * @returns 格式化的产品选项数据
   */
  const fetchRemoteSelectData = async (params: FetchParams) => {
    try {
      const res = await equipmentProductListApi(params);

      if (res.success && res.data) {
        const { page, pageSize } = params;
        const hasMore = page * pageSize < res.data.total;

        const newData = res.data.records.map(item => {
          const nodeTypeLabel = getEnumLabel(ProductNodeType, item.nodeType || 1);
          return {
            ...item,
            label: `${item.productName}(${nodeTypeLabel})`,
            value: item.code,
          };
        });

        return {
          data: newData,
          total: res.data.total,
          hasMore,
        };
      }

      return {
        data: [],
        total: 0,
        hasMore: false,
      };
    } catch (error) {
      console.error('获取产品列表失败:', error);
      return {
        data: [],
        total: 0,
        hasMore: false,
      };
    }
  };
  // 地图选择器开关状态
  const [mapOpen, setMapOpen] = useState(false);

  /**
   * 地图选择取消回调
   */
  const mapCancel = () => {
    setMapOpen(false);
  };

  /**
   * 地图选择确认回调
   * @param values 地图选择的结果
   */
  const mapOk = (values: unknown) => {
    // 类型断言，确保是地址信息
    const addressInfo = values as {
      location: { lng: number; lat: number };
      address: string;
    };
    form.setFieldsValue({
      longitude: addressInfo.location.lng,
      latitude: addressInfo.location.lat,
      address: addressInfo.address,
    });
    setMapOpen(false);
  };
  return (
    <ARow gutter={16}>
      {/* 地图选择器 */}
      <AmapBox mapType="addressType" open={mapOpen} onCancel={mapCancel} onOk={mapOk} detail={{}} />
      <ACol span={12}>
        <AForm.Item
          name="code"
          label="设备code"
          rules={[{ required: true, message: '请输入设备code' }]}
        >
          <AInput placeholder="请输入设备code" allowClear />
        </AForm.Item>
      </ACol>
      <ACol span={12}>
        <AForm.Item
          name="deviceName"
          label="设备名称"
          rules={[{ required: true, message: '请输入设备名称' }]}
        >
          <AInput placeholder="请输入设备名称" allowClear />
        </AForm.Item>
      </ACol>
      <ACol span={24}>
        <AForm.Item
          name="productCode"
          label="所属产品"
          rules={[{ required: true, message: '请选择产品类型' }]}
        >
          <RemoteSelect
            onSelect={(_e, options) => {
              const data = options.data;
              // 判断类型 产品类型为子设备时必填
              if (data.nodeType == ProductNodeType.SUB_DEVICE.value) {
                form.setFieldValue('gatewayCode', data.code);
                form.setFieldValue('gatewayPk', data.productCode);
              }
            }}
            fetchData={fetchRemoteSelectData}
          />
        </AForm.Item>
      </ACol>
      <ACol span={24}>
        <AForm.Item name="dataPushUrl" label="数采接口地址">
          <AInput placeholder="数采接口地址" allowClear />
        </AForm.Item>
      </ACol>
      <ACol span={24}>
        <AForm.Item name="remark" label="设备描述">
          <AInput.TextArea placeholder="请输入设备描述" rows={4} maxLength={200} showCount />
        </AForm.Item>
      </ACol>
      <ACol span={24} className="relative mb-2">
        <AForm.Item name="address" label="详细地址">
          <AInput placeholder="请输入详细地址" allowClear />
        </AForm.Item>
        <span
          onClick={() => setMapOpen(true)}
          className="color-primary cursor-pointer absolute bottom-0 left-0 flex-center pl-2"
        >
          <SvgIcon name="icon-location" className=" text-4 mr-0.5" />
          地图选点
        </span>
      </ACol>
      <ACol span={12}>
        <AForm.Item name="latitude" label="纬度">
          <AInput placeholder="请输入位置纬度" allowClear />
        </AForm.Item>
      </ACol>
      <ACol span={12}>
        <AForm.Item name="longitude" label="经度">
          <AInput placeholder="请输入位置经度" allowClear />
        </AForm.Item>
      </ACol>
    </ARow>
  );
};

export default DeviceForm;
